<template>
  <!-- 资讯列表页面 -->
  <div>
    <!-- 头部区域 -->
    <div class="hearder">
      <!-- 状态选择框 -->
      <el-select v-model="articleStatus" clearable placeholder="状态">
        <el-option label="审核未通过" value="审核未通过" />
        <el-option label="审核通过" value="审核通过" />
        <el-option label="未审核" value="未审核" />
        <el-option label="推荐" value="推荐" />
      </el-select>

      <!-- 标题输入框 -->
      <el-input v-model="articleName" style="width: 200px" placeholder="请输入标题" clearable />

      <!-- 栏目选择框 -->
      <el-select v-model="articleCategory" clearable placeholder="请选择栏目">
        <el-option
          v-for="data in articleCategoryData.filter((item) => !item.parentId)"
          :key="data.id"
          :label="data.name"
          :value="data.id"
        />
      </el-select>

      <!-- 查询按钮 -->
      <el-button type="primary" @click="queryArticle">查询</el-button>

      <!-- 发布风采按钮 -->
      <el-button type="primary" style="float: right" @click="publish">发布风采</el-button>
    </div>

    <!-- 表格内容展示区域 -->
    <div class="table_content">
      <el-table :data="articleData.list" style="width: 100%" @row-click="handdle">
        <!-- 文章序号 -->
        <el-table-column type="index" prop="date" label="序号" align="center" />
        <!-- 文章封面 -->
        <el-table-column prop="cover" label="封面" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              style="width: 150px; height: 150px"
              :src="scope.row.cover"
              object-fit:
              contain
            />
          </template>
        </el-table-column>
        <!-- 文章风采 -->
        <el-table-column prop="title" label="风采" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.title }}</p>
            <p v-if="scope.row.baseUser">{{ scope.row.baseUser.realname }}</p>
            <p v-if="scope.row.category">{{ scope.row.category.name }}</p>
            <p>{{ scope.row.publishTime | fmtDate_global }}</p>
          </template>
        </el-table-column>
        <!-- 文章状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '审核通过'" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status == '推荐'" type="warning">推荐</el-tag>
            <el-tag v-else-if="scope.row.status == '审核不通过'" type="danger">审核不通过</el-tag>
            <el-tag v-else-if="scope.row.status == '未审核'" type="info">未审核</el-tag>
          </template>
        </el-table-column>
        <!-- 文章操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.stop="open(scope.row.id, scope.row.status)"
            >推荐</el-button>
            <el-button
              type="text"
              size="small"
              style="color: blue"
              @click.stop="shenhe(scope.row)"
            >审核</el-button>
            <el-button
              type="text"
              size="small"
              style="color: red"
              @click.stop="deleteRow(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部分页区域 -->
    <div class="paginetion">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2,4,6,8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 审核风采信息模态框 -->
    <el-dialog title="审核风采信息" :visible.sync="centerDialogVisible" width="80%" center>
      <!-- 风采标题信息 -->
      <el-table :data="dialogData">
        <el-table-column property="title" label="栏目标题" align="center" />
      </el-table>
      <!-- 风采栏目内容 -->
      <el-table :data="dialogData">
        <el-table-column label="栏目内容" align="center">
          <template slot-scope="scope">
            <div v-html="scope.row.content" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 模态框底部 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeshenhe('审核通过')">审核通过</el-button>
        <el-button type="primary" @click="changeshenhe('审核不通过')">审核不通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'

export default {
  data() {
    return {
      // 当前栏行的数据
      dialogData: [],
      // 文章数据
      articleData: [],
      // 栏目名称
      articleName: '',
      // 栏目状态
      articleStatus: '',
      // 产品栏目名称
      articleCategory: '',
      // 产品栏目数据
      articleCategoryData: [],

      // 当前的页码
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 8,
      // 页面一共有多少条数据
      total: 10,
      // 定一个查询参数
      queryData: {},

      // 模态框的隐藏
      centerDialogVisible: false
    }
  },
  computed: {
  },

  created() {
    // 自动获取文章数据
    this.getAllarticleData()
    // 自动获取文章栏目数据
    this.queryCategoryData()
  },
  mounted() { },
  methods: {

    // 发送获取文章的数据请求
    async getAllarticleData() {
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize
      }
      // queryData 和 data 结合成一个对象
      // console.log({...data,...this.queryData});
      const res = await get('/article/pageQuery', { ...data, ...this.queryData })
      this.articleData = res.data
      this.total = res.data.total
    },

    // 控制每页条数   val:每页要展示的数据条数
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val
      // 将当前的页数 重置到第一页
      this.currentPage = 1
      // 重新调用获取所有产品数据的方法
      this.getAllarticleData()
    },
    // 控制当前处在的页数   val：当前的页码
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val
      // 重新调用获取所有产品数据的方法
      this.getAllarticleData()
    },

    // 模态框的审核与否
    async changeshenhe(status) {
      await post('/article/changeStatus', { id: this.dialogData[0].id, status })
      this.$message({
        type: 'success',
        message: '成功审核'
      })
      this.centerDialogVisible = false
      this.getAllarticleData()
    },
    // 推荐按钮的方法
    open(id, status) {
      const data = {
        id,
        status: '推荐'
      }
      this.$confirm('您确定要推荐此资讯吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await post('/article/changeStatus', data)
          this.$message({
            type: 'success',
            message: '成功推荐'
          })
          this.getAllarticleData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消推荐'
          })
        })
    },

    // 删除按钮的方法
    deleteRow(id) {
      this.$confirm('此操作将永久删除该风采, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await get('/article/deleteById', { id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getAllarticleData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 审核按钮的方法
    shenhe(row) {
      this.dialogData = [
        {
          title: row.title,
          content: row.content,
          id: row.id
        }
      ]
      this.centerDialogVisible = true
    },

    // 根据条件模糊查询
    queryArticle() {
      // 定义参数
      const data = {
        // 文章标题
        title: this.articleName,
        // 栏目的id
        categoryId: this.articleCategory,
        // 文章状态
        status: this.articleStatus
      }
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key]
        }
        // 将参数赋值给 queryData
        this.queryData = data
        // 将页数强制回到第一页
        this.currentPage = 1
        // 重新加载文章数据
        this.getAllarticleData()
      }
    },

    // 获取产品栏目的方法
    async queryCategoryData() {
      const res = await get('/category/findAll')
      this.articleCategoryData = res.data
    },

    // 点击当前行跳转评论页面
    handdle(row) {
      // 跳转传参
      this.$router.push({
        // 跳转的路由路径
        path: '/admin/info/article/Details',
        // 想要传递的参数 使⽤query对象的形式进⾏传递
        query: {
          msg: row.id
        }
      })
    },

    // 发布风采按钮方法
    publish() {
      // 跳转传参
      this.$router.push({
        // 跳转的路由路径
        path: '/admin/info/article/Publish'
        // 想要传递的参数 使⽤query对象的形式进⾏传递
      })
    }

  }
}
</script>
<style scoped>
/* 底部样式 */
.paginetion {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>
